<template>
  <div class="order-select">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="就餐人数">
        <el-input v-model.number="formInline.num" placeholder="0"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col
        :xs="12"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="4"
        v-for="item in greensList"
        :key="item.id"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="imgSrc + item.food_img" class="image" />
          <div style="padding: 18px">
            <h4>好吃的汉堡</h4>
            <div class="bottom clearfix">
              <span>价格：18</span><br />
              <el-input-number
                v-model="num"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "orderSelect",
  components: {},
  data() {
    return {
      formInline: { num: "" },
      currentDate: new Date(),
      num: 0,
    };
  },
  methods: {
    ...mapActions(["setGreens"]),
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  },
  computed: {
    ...mapState(["imgSrc", "greensList"]),
  },
  watch: {},
  mounted() {
    this.setGreens();
  },
};
</script>
<style lang="less" scoped>
.bottom {
  margin-top: 16px;
  line-height: 12px;
}

.el-card {
  div {
    text-align: center;
    span {
      line-height: 24px;
    }
    .el-input-number {
      margin-top: 16px;
    }
  }
}
.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
